<template>
  <div class="edit credit">
    <Form ref="product" :model="product" :rules="ruleValidate" :label-width="120">
      <h3 class="title">{{this.$route.query.title}}</h3>
      <FormItem label="产品名称" prop="name">
        <Input v-model="product.name" ></Input>
      </FormItem>
      <FormItem label="	金额" prop="money">
        <Input v-model="product.money" number>
          <Button slot="append">分</Button>
        </Input>
      </FormItem>
      <FormItem label="产品天数" prop="day">
        <Input v-model="product.day" number></Input>
      </FormItem>
      <FormItem label="基准日利率" prop="dayRate">
        <Input v-model="product.dayRate" number></Input>
      </FormItem>
      <!--<FormItem label="基准手续费" prop="poundageRate" >
        <Input v-model="product.poundageRate" number>
          <Button slot="append">分</Button>
        </Input>
      </FormItem>-->
      <FormItem label="手续费利率" prop="poundageRate">
        <Input v-model="product.poundageRate" number></Input>
      </FormItem>
      <FormItem label="	逾期日利率" prop="overdueDayRate">
        <Input v-model="product.overdueDayRate" number></Input>
      </FormItem>
      <FormItem label="	违约日利率" prop="penaltyDayRate">
        <RadioGroup v-model="type">
          <Radio :label="1">自定义</Radio>
          <Radio :label="0">固定值</Radio>
        </RadioGroup>
        <Input v-if="type == 1" v-model="product.penaltyDayRate" number></Input>
        <Select clearable  v-if="type == 0" v-model="product.penaltyDayRate">
          <Option :value="0.10">0.10</Option>
          <Option :value="0.20">0.20</Option>
          <Option :value="0.30">0.30</Option>
          <Option :value="0.40">0.40</Option>
          <Option :value="0.50">0.50</Option>
          <Option :value="0.60">0.60</Option>
          <Option :value="0.70">0.70</Option>
          <Option :value="0.80">0.80</Option>
          <Option :value="0.90">0.90</Option>
          <Option :value="1.00">1.00</Option>
        </Select>

      </FormItem>
      <FormItem label="利息" prop="repayInterest" >
        <Input v-model="product.repayInterest" number>
          <Button slot="append">分</Button>
        </Input>
      </FormItem>
      <FormItem label="服务费" prop="serviceCharge" >
        <Input v-model="product.serviceCharge" number>
          <Button slot="append">分</Button>
        </Input>
      </FormItem>
      <FormItem label="总费用" prop="totalCost" >
        <Input v-model="product.totalCost" number>
          <Button slot="append">分</Button>
        </Input>
      </FormItem>
      <!--<FormItem label="商户Id" prop="merchantId">
        <Select clearable  v-model="product.merchantId">
          <Option
            v-for="item in typeList"
            :value=item.id
            :key="item.id"
          >{{ item.merchantName}}</Option>
        </Select>
      </FormItem>-->
      <FormItem label="状态" prop="status">
        <Select clearable  v-model="product.status">
          <Option
            v-for="item in statusList"
            :value=item.id
            :key="item.id"
          >{{ item.name}}</Option>
        </Select>
      </FormItem>
      <FormItem >
        <Button @click="cancel" style="margin-right:5px">取消</Button>
        <Button type="primary" @click="ok">确定</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tag: {
        title: "产品编辑",
        path: "/work/credit/edit"
      },
      type:1,
      typeList: [],
      statusList:[//0未发布1发布2下架
       /* {
          id:0,
          name:'未发布 '
        },*/
        {
          id:1,
          name:'上架 '
        },
        {
          id:2,
          name:'下架 '
        }
        ],
      product: {},
      ruleValidate: {
        name: [{ required: true, message: "请填写产品名称", trigger: "blur" , }],
        money: [{ required: true, message: "请填写金额", trigger: "blur" ,type:'number'}],
        repayInterest: [
          { required: true, message: "请填写利息", trigger: "blur", type:'number' }
        ],
        serviceCharge: [
          { required: true, message: "请填写服务费", trigger: "blur", type:'number' }
        ],
        totalCost: [
          { required: true, message: "请填写总费用", trigger: "blur", type:'number' }
        ],
        day: [{ required: true, message: "请填写产品天数", trigger: "blur" ,type:'number'}],
        dayRate: [
          { required: true, message: "请填写基准日利率", trigger: "blur" ,type:'number'},
           {validator: (rule,value,callback) =>{
             if(value > 1){
               console.log('rate');
               callback(new Error('利率仅限0～1'))
             }
             callback();
           }, trigger: 'blur'}
        ],
        poundageRate: [
          { required: true, message: "请填写手续费利率", trigger: "blur" ,type:'number'},
          {validator: (rule,value,callback) =>{
             if(value > 1){
               console.log('rate');
               callback(new Error('利率仅限0～1'))
             }
             callback();
           }, trigger: 'blur'}
        ],
        overdueDayRate: [
          { required: true, message: "请填写逾期日利率", trigger: "blur" ,type:'number'},
          {validator: (rule,value,callback) =>{
             if(value > 1){
               console.log('rate');
               callback(new Error('利率仅限0～1'))
             }
             callback();
           }, trigger: 'blur'}
        ],
        penaltyDayRate: [
          { required: true, message: "请填写违约日利率", trigger: "blur" ,type:'number'},
          {
            validator: (rule,value,callback) =>{
             if(value > 1){
               console.log('rate');
               callback(new Error('利率仅限0～1'))
             }
             callback();
           },
           trigger: 'blur'
           }
        ],
    /*    merchantId: [
          { required: true, message: "请选择商户名称", trigger: "blur" ,type:'number'}
        ],*/
        status: [
          { required: true, message: "请选择显示状态", trigger: "blur" ,type:'number'}
        ]
      }
    };
  },
  mounted() {
    //this.product = this.$route.query.product;
    this.$post('/bkmerchant/list').then(res => {
      if(res.code == 0){
        this.typeList=res.data.pageListData;
        console.log( this.typeList,'type');
      }
    })

  },
  methods: {
    resetValidate(name) {
      //清空判断
      this.$refs[name].resetFields();
    },
    ok() {
      //确定
      let url = "";
      this.$refs["product"].validate(valid => {
        if (valid) {
          let data = {
            id:this.product.id,
            name:this.product.name,
            money:this.product.money,
            realMoney:this.product.realMoney,
            day:this.product.day,
            dayRate:this.product.dayRate,
            repayInterest:this.product.repayInterest,
            serviceCharge:this.product.serviceCharge,
            totalCost:this.product.totalCost,
            poundageRate:this.product.poundageRate,
            overdueDayRate:this.product.overdueDayRate,
            penaltyDayRate:this.product.penaltyDayRate,
            // merchantId:this.product.merchantId,
            status: this.product.status
          };
          if (this.$route.query.title == "新增产品") {
            url = "/bkproduct/append";
          } else if (this.$route.query.title == "编辑产品") {
            url = "/bkproduct/modify";
          }
          this.$post(url, data).then(
            res => {
              if (res.code === 0) {
                console.log(res, "edit");
                this.$Message.success(`${this.$route.query.title}成功！`);
                this.$router.push({path:'/work/credit/list'})
              }
            },
            err => {
              console.log(err);
            }
          );
        }
      });
    },
    cancel() {
      this.$router.push({path:'/work/credit/list'})
      this.resetValidate("product");
    }
  }
};
</script>

<style scoped lang="less">
.edit {
  width: 50%;
}
.ivu-input-group .ivu-input {
  text-align: center;
}
.ivu-input-group-prepend,
.ivu-input-group-append {
  width: 36px !important;
}
.credit {
  h3 {
    margin-bottom: 15px;
    margin-left: 10px;
    border-left: solid 3px #20a0ff;
    padding-left: 15px;
    font-weight: bolder;
    font-size: 16px;
    color: #000;
  }
}
</style>
